<template>
  <div>
    <!--导航栏-->
    <Header></Header>
    <!--内容-->
    <div class="content">
      <div class="input_body">
        <!-- 标题 -->
        <div class="info_title">
          <b>发布文章:</b>
          <el-input v-model="New.newHead" style="margin-top: 10px;" clearable placeholder="请输入文章标题"></el-input>
        </div>
        <!-- /标题 -->

        <!-- 类型 -->
        <div class="info_style">
          <el-select v-model="New.companyId" placeholder="请选择发布专栏" style="width:100%">
            <el-option v-for="item in enterpriseNames" :key="item.value" :label="item.label" :value="item.value"
              clearable>
            </el-option>
          </el-select>
        </div>
        <!-- /类型 -->

        <!-- 内容 -->
        <div class="info_text">
          <el-input v-model="New.newsBody" type="textarea" :rows="40" maxlength="2000" clearable placeholder="请输入文章内容">
          </el-input>
        </div>
        <!-- /内容 -->
        <!-- 按钮 -->
        <div class="info_button">
          <div class="info_button_style">
            <el-button><span>取消发布</span></el-button>
            <el-button data-v-7736995d @click="addUser()"><span>确认发布</span></el-button>
          </div>
        </div>
        <!-- /按钮 -->
      </div>
    </div>

    <!--脚页-->
    <Footer></Footer>

  </div>


</template>

<script>
  import Header from "../components/Header";;
  import Footer from "../components/Footer";
  export default {
    name: "Serve",
    data() {
      return {
        enterpriseNames: [], // 分类名称数组
        New: {},
        d: {} /*查询单条博客*/ ,
      };
    },
    methods: {
      /* 查询所有的分类 */
      findAllcompany() {
        let _this = this;
        this.$axios
          .get('http://localhost:8087/company/getCompany')
          .then(function(res) {
            _this.selectEnterpriseNames(res.data)
          })
          .catch(function(err) {
            alert('查询失败');
          });
      },
      /*单个id查询用户*/
      findUserById(id) {
        this.updateFormVisible = true
        let _this = this
        console.log(id)
        this.$axios.get("http://localhost:8087/user/getUserById/" + id).then(function(res) {
          _this.d = res.data
        }).catch(function(err) {
          _this.$message('请登录哦~');
        })
      },
      /*添加博客*/
      addUser() {
        if (!this.New.newHead) {
          alert('请输入博客标题');
          return false;
        }
        if (!this.New.newsBody) {
          alert('请输入博客内容');
          return false;
        }
        if (!this.New.companyId) {
          alert('请选择需要发布的专栏');
          return false;
        }
        let _this = this;
        this.New.createName = this.d.idCard;
        this.$axios
          .post('http://localhost:8087/news/setNews', this.New)
          .then(function() {
            //清空本次保存数据
            alert('发布成功！');
            _this.New = {};
            _this.dialogFormVisible = false;
            _this.findAll();
          })
          .catch(function(err) {});
      },
      selectEnterpriseNames(data) {
        console.log(data)
        for (let i = 0; i < data.length; i++) {
          const Enterpriseinfo = {
            label: '',
            value: 0
          }
          Enterpriseinfo.label = data[i].name
          Enterpriseinfo.value = data[i].id
          this.enterpriseNames.push(Enterpriseinfo)
        }
      },
    },
    components: {
      Header,
      Footer,
    },
    created() {
      this.findUserById(localStorage.getItem("id"));
      this.findAllcompany();
    }
  }
</script>

<style scoped>
  .content {
    width: 100%;
    min-height: auto;
    display: flex;
    justify-content: center;
  }

  .input_body {
    margin-top: 10px;
    width: 70%;
    min-height: auto;
    box-shadow: 0 2px 16px #e2e2e2, 0 0 1px #e2e2e2, 0 0 1px #e2e2e2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .info_title {
    width: 80%;
    height: 100px;
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .info_style {
    width: 80%;
    margin-bottom: 10px;
  }

  .info_title b {
    font-size: 30px;
    color: #222226;
  }

  .info_text {
    width: 80%;
    min-height: 800px;
  }

  .info_button {
    width: 80%;
    height: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .info_button_style {
    margin-right: 50px;
  }

  .info_button_style span {
    font-size: 17px;
  }

  .info_button_style button {
    border-radius: 20px;
    height: 40px;
    padding: 8px 24px;
    line-height: 22px;
    color: #999aaa;
    background-color: transparent;
    background-image: none;
    border-color: #999aaa;
    font-size: 16px;
  }

  .info_button_style button[data-v-7736995d] {
    height: 40px;
    padding: 8px 24px;
    font-size: 16px;
    color: #fff;
    border: none;
    white-space: nowrap;
    background: #fc5531;
  }
</style>
